<html lang="en">
<meta charset="UTF-8">
<head>
    <title>Title</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
    <script>
        renovate();
        function renovate() { // DOM 加载完毕默认要执行的函数
            $.ajax({
                url: "dic/selects",
                data: "pn=1",
                type: "get"
            })
            .done(function (result) {
                // 此处处理成功的结果
                $("#currentPage").text(result.current);
                $("#pages").text(result.pages);
                $("#total").text(result.total);
                // 1、解析并显示员工数据
                buildUsersTab(result);
                // 2、解析显示分页信息
                buildNavTab(result);
            })
            .fail(function (xhr, status, error) {
                // 此处处理错误的情况
                console.error("请求失败:", error);
            });
        }
        // 获取第几页的数据
        function toPage(pn) {
            console.log("获取第" + pn  + "页数据");
            $.ajax({
                url: "dic/selects",
                data: "pn=" + pn,
                type: "GET",
                success:function (result){
                    // 此处处理成功的结果
                    $("#currentPage").text(result.current);
                    $("#pages").text(result.pages);
                    $("#total").text(result.total);
                    // 1、解析并显示员工数据
                    buildUsersTab(result);
                    // 2、解析显示分页信息
                    buildNavTab(result);
                },
                error: function (xhr, status, error) {
                    console.error("AJAX 请求失败:", error);
                }
            });
        }
        // 构建分页条
        function buildNavTab(result) {
            $("#pnav").empty();
            console.log(result.hasPreviousPage + "---", result);
            var ul = $("<ul></ul>").addClass("pagination")
            var firstPageLi = $("<li></li>").append($("<a onclick='toPage(1)'></a>").append("首页").attr("href", "#"));
            var prePageLi;
            var nexPageLi;
            if (!result.hasPreviousPage) {
                prePageLi = $("<li></li>").addClass("disabled").append($("<a onclick='toPage(" + (result.pageNum - 1) + ")'></a>").append("&laquo;").attr("href", "#")); // 上一页
            } else {
                prePageLi = $("<li></li>").append($("<a onclick='toPage(" + (result.pageNum - 1) + ")'></a>").append("&laquo;").attr("href", "#")); // 上一页
            }
            if (!result.hasNextPage) {
                nexPageLi = $("<li></li>").addClass("disabled").append($("<a onclick='toPage(" + (result.pageNum + 1) + ")'></a>").append("&raquo;").attr("href", "#")); // 下一页
            } else {
                nexPageLi = $("<li></li>").append($("<a onclick='toPage(" + (result.pageNum + 1) + ")'></a>").append("&raquo;").attr("href", "#")); // 下一页
            }

            var lastPageLi = $("<li></li>").append($("<a onclick='toPage(" + result.pages + ")'></a>").append("尾页").attr("href", "#"));
            ul.append(firstPageLi).append(prePageLi);
            // 遍历总的页数
            $.each(result.navigatepageNums, function (index, item) { // item 是分页条上的页码
                // 选中页要成为激活状态active
                var numli;
                if (result.pageNum == item) { // 后台返回的数据显示在表格里的页的数据（有个第几页） == 当前点的页码
                    numli = $("<li></li>").addClass("active").append($("<a onclick='toPage(" + item + ")'></a>").append(item));
                } else {
                    numli = $("<li></li>").append($("<a onclick='toPage(" + item + ")'></a>").append(item));
                }
                ul.append(numli);
            });


            ul.append(nexPageLi).append(lastPageLi);
            var nav = $("<nav></nav>").append(ul);
            nav.appendTo("#pnav");
        }
        function buildUsersTab(obj) {
            $("#userstab tbody").empty();
            // 得到obj中的LIST
            var users = obj.list;
            // users：遍历的集合list
            // item：每一条数据
            $.each(users, function (index, item) {
                var checkbox = $('<input type="checkbox">').val(item.id);
                var checkboxTd = $('<td></td>').append(checkbox);
                var id = $("<td></td>").append(item.id);
                var dictName = $("<td></td>").append(item.dict_name);
                var sataus = $("<td></td>").append(item.sataus);
                var dictType = $("<td></td>").append(item.dict_type);
                var remark = $("<td></td>").append(item.remark);
                var created_at = $("<td></td>").append(item.created_at);
                var editBtn = $("<button name='upUser'>编辑</button>").addClass("btn btn-default active").on('click', function () {
                    updateById(item.id);
                });
                var deleteBtn = $("<button>删除</button>").addClass("btn btn-default active").on('click', function () { // 直接使用 .on() 方法绑定点击事件
                    deleteById(item.id); // 调用 deleteById 函数
                });
                var btnTd = $("<td></td>").append(editBtn).append(deleteBtn);
                $("<tr></tr>")
                    .append(checkboxTd)
                    .append(id)
                    .append(dictName)
                    .append(dictType)
                    .append(sataus)
                    .append(remark)
                    .append(created_at)
                    .append(btnTd)
                    .appendTo("#userstab tbody");
            });
        }
        //查询
        //模糊查询
        function seleUser(){
            $("#userstab tbody").empty(); // 这个是去掉表格数据
            var name = $('#textSele').val().trim();
            $.ajax({
                url: 'dic/checks',
                data:{
                    dict_name:name
                },
                type: "get",
                dataType: "json",
                contentType: 'application/json;charset=utf-8',
                success:function (result){
                    $("#currentPage").text(result.current);
                    $("#pages").text(result.pages);
                    $("#total").text(result.total);
                    if (result.total == null){
                        // 如果没有查到数据，在表格中显示一条消息
                        var noDataRow = '<tr><td colspan="15" style="text-align:center;">没有找到数据</td></tr>';
                        $("#pnav").empty();
                        $("#userstab tbody").append(noDataRow);
                    }else {
                        // 1、解析并显示员工数据
                        buildUsersTab(result);
                        // 2、解析显示分页信息
                        buildNavTab(result);
                    }
                },
                error: function (xhr, status, error) {
                    console.error("AJAX 请求失败:", error);
                }
            });
        }
        //重置按钮
        //重置
        function sele(){
            $("#userstab tbody").empty(); // 这个是去掉表格数据
            $('#textSele').empty();
            $.ajax({
                url: 'dic/selects',
                type: "get",
                dataType: "json",
                contentType: 'application/json;charset=utf-8',
                success:function (result){
                    $("#currentPage").text(result.current);
                    $("#pages").text(result.pages);
                    $("#total").text(result.total);
                    if (result.total == null){
                        // 如果没有查到数据，在表格中显示一条消息
                        var noDataRow = '<tr><td colspan="15" style="text-align:center;">没有找到数据</td></tr>';
                        $("#pnav").empty();
                        $("#userstab tbody").append(noDataRow);
                    }else {
                        // 1、解析并显示员工数据
                        buildUsersTab(result);
                        // 2、解析显示分页信息
                        buildNavTab(result);
                    }
                },
                error: function (xhr, status, error) {
                    console.error("AJAX 请求失败:", error);
                }
            });
        }
        //打开添加用户模态框
        function add(){
            $('#myModalAdd').modal('show');
            return false;
        }


        //保存添加数据
        function saveAdd(){

            var dict_name = $('#dict_name').val();
            var dict_type = $('#dict_type').val();
            var remark = $('#remark').val();
            $.ajax({
                url:"dic/add",
                data:{
                    dict_name:dict_name,
                    dict_type:dict_type,
                    remark:remark
                },
                dataType: "json",
                type:"post",
                success:function (req){
                    console.log(req);
                    if (req.code == 1){
                        alert("用户添加成功!");
                        $('#myModalAdd').modal('hide');
                        toPage($("#currentPage").text());
                    }else {
                        alert("添加失败!")
                    }

                }
            });
        }
        //删除
        var delId;
        function deleteById(id){
            console.log("========================>",id);
            delId = id;
            $('#d1').modal('show');

        }
        //确认删除按钮
        function dele1(){
            $.ajax({
                url:"dic/delete",
                data:{
                    id:delId
                },
                dataType:"json",
                type:"Post",
                success:function (req){
                    console.log(req);
                    console.log(req.code);
                    if (req.code == 1){
                        alert("删除成功!");
                        $('#d1').modal('hide');
                        toPage($("#currentPage").text());
                    }else {
                        alert("删除失败");
                        $('#d1').modal('hide');
                        toPage($("#currentPage").text());
                    }
                }
            });
        }

        //左侧删除按钮
        function deletes(){
            var checkedIds = [];
            $("#userstab input[type='checkbox']:checked").each(function() {
                checkedIds.push($(this).val());
            });
            if(checkedIds.length == 0){
                alert("未选择数据，请选择你将要删除的数据");
            }else {
                $('#d2').modal('show');
            }
        }
        //确认删除按钮
        function dele2(){
            var checkedIds = [];
            $("#userstab input[type='checkbox']:checked").each(function() {
                checkedIds.push($(this).val());
            });
            var ids = checkedIds.toString();
            if (checkedIds.length > 0) {
                $.ajax({
                    url: "dic/deletes",
                    type: "POST",
                    data: {
                        ids:ids
                    },
                    dataType: "json",
                    success: function(rep) {
                        if (rep.code == 200){
                            alert("删除成功!");
                            $('#d2').modal('hide');
                            toPage($("#currentPage").text());
                        }
                        if (rep.code == 300){
                            alert("有一部分删除成功，也有一部分已经删除");
                            $('#d2').modal('hide');
                            toPage($("#currentPage").text());
                        }
                        if (rep.code == 500){
                            alert("未知错误，删除失败");
                            $('#d2').modal('hide');
                            toPage($("#currentPage").text());
                        }
                    }
                });
            } else {
                alert("请至少选择一个要删除的项。");
            }
        }
        var currentId;

        //更新信息
        function updateById(id) {
            // 显示角色模态框
            currentId = id;
            $('#myModalUpdata').modal('show');
        }
        function saveUpdata(){
            let id = currentId;
            var dict_name = $('#dict_names').val();
            var dict_type = $('#dict_types').val();
            var remark = $('#remarks').val();
            $.ajax({
                url:"dic/updata",
                data:{
                    id:id,
                    dict_name:dict_name,
                    dict_type:dict_type,
                    remark:remark
                },
                type:"get",
                success:function (req){
                    console.log(req);
                    if (req.code == 250){
                        alert("编辑失败，你要更新的数据可能以删除!");
                        $('#myModalUpdata').modal('hide');
                        toPage(1);
                    }else if(req.code == 200){
                        alert("更新成功");
                        $('#myModalUpdata').modal('hide');
                        toPage($("#currentPage").text());
                    }else {
                        alert("未知原因，更新失败");
                        $('#myModalUpdata').modal('hide');
                    }

                }
            });


        }

        //左上角更新
        function update2(){
            var checkedIds = [];
            $("#userstab input[type='checkbox']:checked").each(function() {
                checkedIds.push($(this).val());
            });
            // 打印或处理选中的ID值
            console.log("Selected IDs:", checkedIds);
            if(checkedIds.length == 0 ){
                alert("你还未选择将要修改的数据!")
            }else if (checkedIds.length > 1){
                alert("你选择了多个数据，请只选择一个你将要修改的数据!")
            }else{
                $('#myModalUpdata2').modal('show');
                console.log(checkedIds[0]);
            }
        }

        function saveUpdata2(){
            var checkedIds = [];
            $("#userstab input[type='checkbox']:checked").each(function() {
                checkedIds.push($(this).val());
            });
            var dict_name = $('#dict_namess').val();
            var dict_type = $('#dict_typess').val();
            var remark = $('#remarkss').val();

            $.ajax({
                url:"dic/updata",
                data:{
                    id:checkedIds[0],
                    dict_name:dict_name,
                    dict_type:dict_type,
                    remark:remark
                },
                type:"get",
                success:function (req){
                    console.log(req);
                    if (req.code == 250){
                        alert("编辑失败，你要更新的数据可能以删除!");
                        $('#myModalUpdata2').modal('hide');
                        toPage(1);
                    }else if(req.code == 200){
                        alert("更新成功");
                        $('#myModalUpdata2').modal('hide');
                        toPage($("#currentPage").text());
                    }else {
                        alert("未知原因，更新失败");
                        $('#myModalUpdata2').modal('hide');
                    }

                }
            });
        }
        //导出
        function impt(){
            window.location.href = 'dic/export';
        }
    </script>
</head>
<body>

<div class="container-fluid">
    <form class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="textSele"/>
        </div>
        <div class="form-group">
            <button type="button" class="btn" onclick="seleUser()">查询</button>
            <button type="button" class="btn" onclick="sele()">重置</button>
            <button type="button" class="btn" data-toggle="modal" data-target="#myModal">添加</button>
        </div>
    </form>
</div>
<table class="table table-striped" id="userstab">
    <div class="col-md-4">
        <button type="button" class="btn btn-default active" onclick="add()">新增</button>
        <button type="button" class="btn btn-default active" onclick="update2()">修改</button>
        <button type="button" class="btn btn-default active" onclick="deletes()">删除</button>
        <button type="button" class="btn btn-default active" onclick="impt()">导出</button><br>
    </div>
    <thead>
    <th>#</th>
    <th>字典主键</th>
    <th>字典名称</th>
    <th>字典类型</th>
    <th>状态</th>
    <th>备注</th>
    <th>创建时间</th>
    <th>操作</th>
    </thead>
    <tbody>
    <!-- 显示遍历出来的用户数据 -->
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3">
            当前<span id="currentPage"></span>页，共有<span id="pages"></span>页，共有<span id="total"></span>条数据

        </td>
        <td colspan="5" align="center">

            <nav aria-label="Page navigation" id="pnav">

            </nav>
        </td>
    </tr>
    </tfoot>
</table>
<!-- 添加用户的模态框 -->
<div class="modal fade" id="myModalAdd" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="myModalLabel1">用户添加窗口</h5>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="dict_name" class="form-label">字典名称</label>
                        <input type="text" class="form-control" id="dict_name" placeholder="请输入字典名称"  maxlength="25">
                    </div>
                    <div class="mb-3">
                        <label for="dict_type" class="form-label">字典类型</label>
                        <select id="dict_type" class="form-control">
                            <option value="-1">--请选择--</option>
                            <option value="数据字典1">数据字典1</option>
                            <option value="数据字典2">数学字典2</option>
                            <option value="数据字典3">数据字典3</option>
                            <option value="数据字典4">数据字典4</option>
                            <option value="数据字典5">数据字典5</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="remark" class="form-label">备注</label>
                        <input type="text" class="form-control" id="remark" placeholder="请添加备注">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default active" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-default active" onclick="saveAdd()">保存数据</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改用户的模态框 -->
<div class="modal fade" id="myModalUpdata" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="myModalLabel">修改窗口</h5>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="dict_names" class="form-label">字典名称</label>
                        <input type="text" class="form-control" id="dict_names" placeholder="请输入字典名称"  maxlength="25">
                    </div>
                    <div class="mb-3">
                        <label for="dict_types" class="form-label">字典类型</label>
                        <select id="dict_types" class="form-control">
                            <option value="-1">--请选择--</option>
                            <option value="数据字典1">数据字典1</option>
                            <option value="数据字典2">数学字典2</option>
                            <option value="数据字典3">数据字典3</option>
                            <option value="数据字典4">数据字典4</option>
                            <option value="数据字典5">数据字典5</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="remarks" class="form-label">备注</label>
                        <input type="text" class="form-control" id="remarks" placeholder="请添加备注">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default active" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-default active" onclick="saveUpdata()">保存数据</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModalUpdata2" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="myModalLabel2">修改窗口</h5>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="dict_namess" class="form-label">字典名称</label>
                        <input type="text" class="form-control" id="dict_namess" placeholder="请输入字典名称"  maxlength="25">
                    </div>
                    <div class="mb-3">
                        <label for="dict_types" class="form-label">字典类型</label>
                        <select id="dict_typess" class="form-control">
                            <option value="-1">--请选择--</option>
                            <option value="数据字典1">数据字典1</option>
                            <option value="数据字典2">数学字典2</option>
                            <option value="数据字典3">数据字典3</option>
                            <option value="数据字典4">数据字典4</option>
                            <option value="数据字典5">数据字典5</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="remarkss" class="form-label">备注</label>
                        <input type="text" class="form-control" id="remarkss" placeholder="请添加备注">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default active" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-default active" onclick="saveUpdata2()">保存数据</button>
            </div>
        </div>
    </div>
</div>
<!-- 删除用户的模态框1 -->
<div class="modal fade" id="d1" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="">确认删除</h5>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default active" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-default active" onclick="dele1()">确认删除</button>
            </div>
        </div>
    </div>
</div>
<!-- 删除用户的模态框2 -->
<div class="modal fade" id="d2" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="dd2">确认删除</h5>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default active" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-default active" onclick="dele2()">确认删除</button>
            </div>
        </div>
    </div>
</div>
</body>